<template>
  <view>
    <view class="box">
      <uni-search-bar
        class="search"
        placeholder="请输入要搜索的歌曲或歌手"
        :focus="true"
        v-model="searchValue"
        @input="onInput"
				@cancel="onCancel"
        @confirm="onConfirm"
        @clear="searchValue = ''"
        >
			</uni-search-bar>
      <!-- {{ resList }} -->
      <view class="searchlist">
        <hotSearch v-if="activeList === listNum.default" @onInput="onInput" @delone="delone" @del="del" :historylist="searchHistory" @change="val => onConfirm({val})" />
        <searchAdvice v-else-if="activeList === listNum.advice" @change="val => onConfirm({val})" :list="suggestList" />
        <searchResult v-else :list="resList" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 这里编写逻辑代码
  import { ref } from 'vue'
  import hotSearch from './components/hotSearch.vue'
  import searchAdvice from './components/searchAdvice.vue'
  import searchResult from './components/searchResult.vue'
  import { searchAdviceApi, searchResultApi } from '../../services/index'
  import type { SearchResult } from '../../services/type'

  enum listNum {
    default = 0,
    advice = 1,
    result = 2,
  }
  const activeList = ref(listNum.default) // 默认显示热搜列表
  const searchValue = ref('') // 搜索框输入值
  const suggestList = ref() // 搜索建议列表
  const resList = ref<SearchResult[]>([]) // 搜索结果列表

  // 搜索历史
  const searchHistory = ref<string[]>([])

  // 搜索建议接口
  const getSuggestList =async (keywords: string) => {
    try {
      const res = await searchAdviceApi(keywords)
      suggestList.value = res.result.allMatch
    } catch (error) {
      console.log(error)
    }
  }
  // 搜索结果接口
  const getResultList = async (keywords: string) => {
    try {
      const res = await searchResultApi(keywords)
      resList.value = res.result.songs
    } catch (error) {
      console.log(error)
    }
  }

  // 确认是否搜索
  const onConfirm = (res: { val: string }) => {
      searchValue.value = res.val
      activeList.value = listNum.result
      if (!searchHistory.value.includes(res.val) && searchHistory.value.length < 10) {
        searchHistory.value.unshift(res.val)
      } else if (!searchHistory.value.includes(res.val) && searchHistory.value.length >= 10) {
        searchHistory.value.unshift(res.val)
        searchHistory.value.pop()
      }
      // 调用搜索结果接口
      getResultList(res.val)
      console.log(resList.value)
  }

  let debounceId: number | null = null
  const onInput = (val: string) => {
    if (!val || searchValue.value === val) return
    activeList.value = listNum.advice
    searchValue.value = val
    // 调用搜索建议接口
    if (debounceId) clearTimeout(debounceId)
    debounceId = setTimeout(() => {
      if ( searchHistory.value.length >= 10 && !searchHistory.value.includes(val)) {
        searchHistory.value.unshift(val)
        searchHistory.value.pop()
      } else if (searchHistory.value.length < 10 && !searchHistory.value.includes(val)) {
        searchHistory.value.push(val)
      }
      getSuggestList(val)
    }, 800)
  }
  const onCancel = (val: { value: string }) => {
    activeList.value = listNum.default
    searchValue.value = val.value
    suggestList.value = []
    resList.value = []
  }

// 清空历史记录
const del = () => {
  searchHistory.value = []
}
// 删除一条历史记录
const delone = (val: string) => {
  const index = searchHistory.value.indexOf(val)
  if (index !== -1) {
    searchHistory.value.splice(index, 1)
  }
}


</script>

<style scoped>
/* 这里编写样式代码 */
.box {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* .search {
  text-align: center;
} */
</style>